<script>
export default {
  name: 'FieldBatchConfig',
  props: {
    elements: {
      type: Array,
      default() {
        return () => []
      }
    }
  },
  methods: {
    dynamicOnlineSave() {
      this.$emit('dynamicOnlineSave')
    }
  }
}
</script>

<template>
  <el-drawer close-on-press-escape title="配置字段" size="80%" v-bind="$attrs" close-on-click-modal>
    <div style="height: 100%;position: relative">
      <el-table :data="elements" size="small" border height="90%">
        <el-table-column label="字段名称">
          <template #default="scope">
            <el-input v-model="scope.row.name" size="small" placeholder="请输入内容" @blur="()=>dynamicOnlineSave(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="中文名称">
          <template #default="scope">
            <el-input v-model="scope.row.label" size="small" placeholder="请输入内容" @blur="()=>dynamicOnlineSave(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="英文名称">
          <template #default="scope">
            <el-input v-model="scope.row.alias" size="small" placeholder="请输入内容" @blur="()=>dynamicOnlineSave(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="排序值" width="120">
          <template #default="scope">
            <el-input-number v-model="scope.row.orderNum" style="width: 100%" size="small" placeholder="请输入内容" @blur="()=>dynamicOnlineSave(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="字段类型">
          <template #default="scope">
            <el-select v-model="scope.row.type" size="small" style="width: 100%;" placeholder="请选择" @change="()=>dynamicOnlineSave(scope.row)">
              <el-option label="单行文本" value="input"/>
              <el-option label="多行文本" value="textarea"/>
              <el-option label="下拉选择" value="select"/>
              <el-option label="日期选择" value="date"/>
              <el-option label="日期时间选择" value="datetime"/>
              <el-option label="单选框" value="radio"/>
              <el-option label="多选框" value="checkbox"/>
              <el-option label="级联选择" value="cascader"/>
              <el-option label="数字输入框" value="number"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" width="80">
          <template #default="scope">
            <el-switch v-model="scope.row.required" size="small" @change="()=>dynamicOnlineSave(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="height: 10%;display: flex;align-items: center;padding: 10px">
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-edit-outline">修改</el-button>
        </el-col>
      </el-row>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>
